<template>
	<view class="detail">
		<view class="detail-title">
			<image class="wx-box" src="/static/img/weixin.png" mode=""></image>
			<view class="">
				{{mp_info.info.subscribe_title ? mp_info.info.subscribe_title : '' }}
			</view>
			<view class="wx-btn" @click="goToWebView">
				去关注
			</view>
		</view>
		<!-- <view class="detail-content">
			<view class="detail-content-pic">
				<image class="pic-box" src="/static/img/my.png" mode=""></image>
				<text class="pic-text">东方根泉</text>
			</view>
			<view class="detail-content-box">
				<image class="content-img" src="/static/img/my.png" mode=""></image>
			</view>
			<view class="detail-content-text">
				"祥蛇携福至，好运连连开。"
			</view>
		</view> -->
		<block v-if="opt.type == 0">
			<view class="list-item" @click="goDetail">
				<view class="list-item-text">
					礼包商品
				</view>
				<view class="list-item-box">
					<view class="" v-for="(item,index) in product.prolist" :key="index">
						<view class="list-item-content">
							<view class="list-item-content-left">
								<image class="shop-pic" :src="item.pic" mode=""></image>
							</view>
							<view class="list-item-content-right">
								<view class="list-item-content-title">
									{{item.name}}
								</view>
								<view class="list-item-content-text">
									{{item.ggname}}
								</view>
								<view class="list-item-content-price">
									<view class="">
										￥{{item.totalprice}}
									</view>
									<view class="">
										× {{item.num}}
									</view>
								</view>
							</view>
						</view>
						<view class="list-item-btn">
							<view class="btn" @click="handleBtnClick(index)">
								我也要买一件
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="list-item">
				<view class="list-item-text">
					收货人信息
				</view>
				<view class="list-item-name">
					<text style="margin-right: 20rpx;">{{product.linkman || ''}}</text>
					<text>{{product.tel}}</text>
				</view>
				<view class="list-item-address">
					{{product.area2}}{{product.address}}
				</view>
				<view class="list-item-address-box">
					<view class="address-box-title">
						<view class="address-box-title-left">
							<image :src="product.prolist[0].pic" class="address-box-img" mode=""></image>
							<view class="num">
								共{{product.prolist && product.prolist.length}}件
							</view>
						</view>
						<view class="address-box-title-right">
							<view class="address-box-title-right-status common-s">
								{{product.statustxt}}
							</view>
							<view class="common-s" v-if="product.status == 3">
								承运来源：{{product.express_com}}
							</view>

							<view class="common-s flex-box" v-if="product.status == 3">
								<view class="">
									运单号：{{product.express_no}}
								</view>
								<view class="">
									<image @click="copyToClipboard(product.express_no, '运单号')" class="copy-icon"
										src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/2d3f9a821ed1e92c529873a33ce44d09.png"
										mode=""></image>
								</view>
							</view>
							<view class="flex-box">
								<view class="">
									订单号：{{product.ordernum}}
								</view>
								<view class="">
									<image @click="copyToClipboard(product.ordernum, '订单号')" class="copy-icon"
										src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/2d3f9a821ed1e92c529873a33ce44d09.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="logistics-container" v-if="product.status == 3">
						<!-- 物流信息列表 -->
						<view v-for="(item, index) in showData" :key="index" class="logistics-item">
							<!-- 左侧状态图标 -->
							<view class="status-icon">
								<!-- 动态状态图标 -->
								<view class="icon-container">
									<image class="status-icon-img" :src="getStatusIcon(item, index)"></image>
								</view>

								<!-- 时间轴连线 (除最后一条外) -->
								<view v-if="showData && index !== showData.length - 1" class="timeline"></view>
							</view>

							<!-- 右侧信息 -->
							<view class="info-content">
								<view class="status-time">{{item.AcceptTime}}</view>
								<view class="status-desc">{{item.AcceptStation}}</view>
							</view>
						</view>

						<!-- 查看更多/收起按钮 -->
						<view v-if="datalist && datalist.length > 2" class="toggle-view" @click="tooggleShow">
							<text>{{showAll ? '收起物流详情' : '查看更多物流详情'}}</text>
							<image class="arrow-icon"
								:src="showAll ? '/static/img/arrow-up.png' : '/static/img/arrowdown.png'"
								mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</block>

		<block v-if="opt.type == 1">
			<!-- 商品列表 -->
			<view class="list-item">
				<view class="list-item-text">礼包商品</view>
				<view v-if="product.gift_use_num == 0" class="no-receive-tip">
					<text>礼包待领取</text>
				</view>
				<view class="list-item-box" v-for="(pro1,pro1Index) in getgiftlist" :key="pro1Index">
					<view v-for="(pro, proIndex) in pro1.prolist" :key="proIndex">
						<view class="list-item-content">
							<view class="list-item-content-left">
								<image class="shop-pic" :src="pro.pic" mode=""></image>
							</view>
							<view class="list-item-content-right">
								<view class="list-item-content-title">{{pro.name}}</view>
								<view class="list-item-content-text">{{pro.ggname}}</view>
								<view class="list-item-content-price">
									<view>￥{{pro.totalprice}}</view>
									<view>× {{pro.num}}</view>
								</view>
							</view>
						</view>
						<view class="list-item-btn">
							<view class="btn" @click="handleBtnClick(proIndex)">我也要买一件</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 收礼人信息列表 -->
			<view class="list-item" v-for="(receiver, receiverIndex) in getgiftlist" :key="receiverIndex">
				<view class="list-item-text">收礼人信息 </view>
				<view class="headimg-box">
					<image class="headimg" :src="receiver.get_gift_headimg" mode=""></image>
					<text>{{receiver.get_gift_nickname}}</text>
				</view>
				<view class="list-item-name">
					<text>{{receiver.linkman || ''}}</text>
					<text>{{receiver.tel}}</text>
				</view>
				<view class="list-item-address">
					{{receiver.area2}}{{receiver.address}}
				</view>
				<view class="list-item-address-box">
					<view class="address-box-title">
						<view class="address-box-title-left">
							<image :src="receiver.prolist[0].pic" class="address-box-img" mode=""></image>
							<view class="num">共{{receiver.prolist && receiver.prolist.length}}件</view>
						</view>
						<view class="address-box-title-right">
							<view class="address-box-title-right-status common-s">{{receiver.statustxt}}</view>
							<view class="common-s" v-if="receiver.status == 3">承运来源：{{receiver.express_com}}</view>
							<view class="common-s flex-box" v-if="receiver.status == 3">
								<view>运单号：{{receiver.express_no}}</view>
								<view>
									<image @click="copyToClipboard(receiver.express_no, '运单号')" class="copy-icon"
										src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/2d3f9a821ed1e92c529873a33ce44d09.png"
										mode=""></image>
								</view>
							</view>
							<view class="flex-box">
								<view>订单号：{{receiver.ordernum}}</view>
								<view>
									<image @click="copyToClipboard(receiver.ordernum, '订单号')" class="copy-icon"
										src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/2d3f9a821ed1e92c529873a33ce44d09.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<!-- 物流信息 -->
					<view class="logistics-container" v-if="receiver.status == 3 && receiver.datalist">
						<view v-for="(logistics, logIndex) in getShowData(receiverIndex)" :key="logIndex"
							class="logistics-item">
							<view class="status-icon">
								<view class="icon-container">
									<image class="status-icon-img" :src="getStatusIcon(logistics, logIndex)"></image>
								</view>
								<view v-if="logIndex !== getShowData(receiverIndex).length - 1" class="timeline"></view>
							</view>
							<view class="info-content">
								<view class="status-time">{{logistics.AcceptTime}}</view>
								<view class="status-desc">{{logistics.AcceptStation}}</view>
							</view>
						</view>
						<view v-if="receiver.datalist.length > 2" class="toggle-view"
							@click="toggleShowAll(receiverIndex)">
							<text>{{showAllMap[receiverIndex] ? '收起物流详情' : '查看更多物流详情'}}</text>
							<image class="arrow-icon"
								:src="showAllMap[receiverIndex] ? '/static/img/arrow-up.png' : '/static/img/arrowdown.png'"
								mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="float-buttons">
			<view class="button-wrapper" @click="goto" :data-url="'/pages/shop/cart'">
				<view class="button-item cart-button">
					<image class="button-icon"
						src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250312/06a38360f955195d68fd66142f6940e0.png" />
				</view>
			</view>

			<view class="button-wrapper">
				<button class="button-item service-button" open-type="contact">
					<image class="button-icon" src="/static/img/kefu.png" />
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				static_url: 'https://your-static-domain.com',
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,
				showAll: false,
				datalist: [],
				hideIndex: -1,
				opt: {},
				product: {},
				statusIcons: {
					'运输中': '/static/img/dot1.png',
					'派送中': 'https://heda123.../f13fd675bd4357f9d9595d2304b08e08.png',
					'已签收': '/static/img/location/circle-icon.png'
				},
				getgiftlist: [],
				showAllMap: {},
				mp_info: {}
			}
		},
		computed: {
			showData() {
				return this.showAll ? this.datalist : this.datalist.slice(0, 2)
			}
		},
		onLoad(opt) {
			this.opt = opt;
			this.getdata();
			this.getmp();
		},
		methods: {
			getmp() {
				app.get('my/getmpsubscribe', {

				}, (res) => {
					if (res.status == 200) {
						this.mp_info = res.res.mp
					} else {

						app.error(res.msg)
					}

				});
			},
			goToWebView() {
				const url = this.mp_info.info.subscribe_url;
				uni.navigateTo({
					url: `/pagesZone/webview/index?url=${encodeURIComponent(url)}`
				});
			},
			getdata() {
				var that = this;
				var url = '';
				if (that.opt.type == 0) {
					url = 'MemberCenter/getreceivegiftdetail'
				} else if (that.opt.type == 1) {
					url = 'MemberCenter/getgivegiftdetail'
				}
				app.get(url, {
					id: that.opt.id
				}, function(res) {
					if (res.code == 200) {
						// 根据不同类型处理数据
						if (that.opt.type == 1) {
							// 赠送礼物(type=1)的数据处理
							that.getgiftlist = res.res.getgiftlist;

							that.product = res.res;

							// 初始化每个收礼人的物流展开状态
							const newShowAllMap = {};
							if (res.gift_use_num == 0) {
								res.res.getgiftlist.forEach((_, index) => {
									newShowAllMap[index] = false;
								});
							}
							that.showAllMap = newShowAllMap;
						} else {
							// 接收礼物(type=0)的数据处理
							that.product = res.res;
							that.datalist = res.res.datalist;

						}
					} else {
						app.error(res.msg)
					}
				})
			},
			// 获取当前显示的物流数据
			getShowData(index) {
				if (!this.getgiftlist[index] || !this.getgiftlist[index].datalist) return [];
				return this.showAllMap[index] ?
					this.getgiftlist[index].datalist :
					this.getgiftlist[index].datalist.slice(0, 2);
			},

			// 切换物流详情显示
			toggleShowAll(index) {
				this.$set(this.showAllMap, index, !this.showAllMap[index]);
			},

			getStatusIcon(item, index) {
				// 第一条显示当前状态
				if (index === 0) {
					if (item.AcceptStation.includes('签收')) return this.statusIcons['已签收'];
					if (item.AcceptStation.includes('派送')) return this.statusIcons['派送中'];
					return this.statusIcons['运输中'];
				}
				// 其他条目显示普通圆点
				return '/static/img/dot1.png';
			},

			tooggleShow() {
				this.showAll = !this.showAll
			},
			copyToClipboard(text, type) {
				wx.setClipboardData({
					data: text,
					success: () => {
						wx.showToast({
							title: `${type}已复制`,
							icon: 'success',
							duration: 1500
						});
					},
					fail: () => {
						wx.showToast({
							title: `${type}复制失败`,
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			toggleItem(index) {
				this.hideIndex = this.hideIndex === index ? -1 : index;
			},

			calculateTransportTime(item) {
				// 计算运输时长逻辑
				return '预计明天送达';
			},
			getStatusClass(status) {
				return {
					'status-transporting': status === '运输中',
					'status-delivering': status === '派送中',
					'status-received': status === '已签收'
				};
			},
			getTimelineClass(index) {
				const nextItem = this.datalist[index + 1];
				return {
					'timeline-transporting': nextItem.status === '运输中',
					'timeline-delivering': nextItem.status === '派送中',
					'timeline-received': nextItem.status === '已签收'
				};
			}
		}
	}
</script>

<style scoped>
	.detail {
		padding: 20rpx;
	}

	.detail-title {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wx-box {
		width: 40rpx;
		height: 40rpx;
	}

	.wx-btn {
		border: 1px solid #eee;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.detail-content {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.detail-content-pic {
		display: flex;
		align-items: center;
	}

	.pic-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.pic-text {
		margin-left: 10rpx;
	}

	.detail-content-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.content-img {
		width: 400rpx;
		height: 400rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.detail-content-text {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

	}

	.list-item {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.list-item-content-left {
		margin-right: 10rpx;
	}

	.list-item-text {
		font-weight: 700;

	}

	.list-item-content {
		display: flex;
		margin-top: 10rpx;
		position: relative;
	}

	.list-item-content-right {
		display: flex;
		flex-direction: column;

	}

	.shop-pic {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.list-item-content-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.list-item-content-text {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.list-item-content-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
	}

	.list-item-btn {
		display: flex;
		justify-content: flex-end;
		padding: 10px 0;
	}

	.btn {
		padding: 10rpx 20rpx;
		font-size: 12px;
		border-radius: 36rpx;
		border: 1px solid #000;
		margin-left: 20rpx;
	}

	.list-item-name {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #888;
	}

	.list-item-address {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #888;
	}

	.list-item-address-box {
		margin-top: 20rpx;
		border-top: 1px solid #eee;
	}

	.address-box-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;

	}

	.address-box-title-left {
		position: relative;
	}

	.num {
		position: absolute;
		bottom: -20rpx;
		left: 20rpx;
		background-color: #646262;
		color: #fff;
		font-size: 24rpx;
		border-radius: 6rpx;
		padding: 4rpx 10rpx;
	}

	.address-box-title {
		display: flex;
		margin-top: 20rpx;
	}

	.address-box-title-right {
		margin-left: 20rpx;
		flex: 1;
	}

	.common-s {
		margin-bottom: 10rpx;
	}

	.copy-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.flex-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logistics-container {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 20rpx;
	}

	.logistics-item {
		display: flex;
		padding: 20rpx 0;
		position: relative;
	}

	.status-icon {
		width: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.transport-icon,
	.delivery-icon,
	.received-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.timeline {
		width: 2rpx;
		height: 100%;
		background: #eaeaea;
		margin-top: 10rpx;
	}

	.timeline-last {
		height: 60rpx;
		/* 最后一条缩短 */
	}

	.info-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.status {
		font-size: 28rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}



	.location {
		font-size: 26rpx;
		color: #333;
		display: block;
		margin-bottom: 6rpx;
	}

	.time {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.view-more,
	.view-less {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #409EFF;
		padding: 20rpx 0;
	}

	.arrow-down,
	.arrow-up {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
	}

	.kefu-img {
		width: 60rpx;
		height: 60rpx;
	}

	.float-buttons {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		z-index: 999;
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 20rpx;
	}

	.button-wrapper {
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.button-wrapper:active {
		transform: scale(0.95);
	}

	.button-item {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		margin: 0;
		border: none;
		background: #fff;
	}


	.button-icon {
		width: 48rpx;
		height: 48rpx;
	}

	/* 添加小红点提示 */
	.badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		width: 24rpx;
		height: 24rpx;
		background: #ff4d4f;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.logistics-container {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.logistics-item {
		display: flex;
		padding: 20rpx 0;
		position: relative;
	}

	.status-icon {
		width: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-container {
		width: 24rpx;
		height: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}

	.status-icon-img {
		width: 100%;
		height: 100%;
	}

	.timeline {
		flex: 1;
		width: 2rpx;
		background-color: #eaeaea;
		margin: 8rpx 0;
	}

	.info-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.status-time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.status-desc {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.toggle-view {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		color: #4a90e2;
		font-size: 26rpx;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.headimg-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.headimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.no-receive-tip {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    padding: 40rpx 0;
	    color: #999;
	    font-size: 28rpx;
	}
</style>